<template>
  <a-layout-sider v-model:collapsed="globalStore.collapsed" :trigger="null" collapsible>
    <div class="logo" >
        {{ globalStore.collapsed ? '植物' :"植物养护助手" }}
    </div>
    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" :items="adminMenuItems" @click="handleMenuClick" />
  </a-layout-sider>
</template>

<script setup>
import { ref, h } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { UserOutlined,CommentOutlined,BookOutlined,SlackOutlined,TableOutlined,ProfileOutlined,StarOutlined } from '@ant-design/icons-vue';
import { useGlobalStore } from '@/stores/global'

const router = useRouter();
const route = useRoute();
const globalStore = useGlobalStore();
const selectedKeys = ref([route.path]);
const adminMenuItems = ref([
  {
    key: '/manager/user',
    icon: () => h(UserOutlined),
    label: '用户管理',
    title: '用户管理',
  },
  {
    key: '/manager/manual',
    icon: () => h(BookOutlined),
    label: '植物手册管理',
    title: '植物手册管理',
  },
  {
    key: '/manager/plant',
    icon: () => h(SlackOutlined),
    label: '植物管理',
    title: '植物管理',
  },
  {
    key: '/manager/plate',
    icon: () => h(TableOutlined),
    label: '板块管理',
    title: '板块管理',
  },
  {
    key: '/manager/post',
    icon: () => h(ProfileOutlined),
    label: '帖子管理',
    title: '帖子管理',
  },
  {
    key: '/manager/collect',
    icon: () => h(StarOutlined),
    label: '收藏管理',
    title: '收藏管理',
  },
  {
    key: '/manager/comment',
    icon: () => h(CommentOutlined),
    label: '评论管理',
    title: '评论管理',
  },
]);
const handleMenuClick = ({ item }) => {
  const { key } = item.originItemValue;
  selectedKeys.value = [route.path];
  router.push(key);


};

</script>

<style lang="less" scoped>
.logo {
  height: 56px;
  color: #fff;
  font-size: 16px;
  line-height: 56px;
  box-sizing: border-box;
  padding-left: 8px;
  text-align: center;
}
</style>
